<div
  class="x-tree-node-content"
  [class.x-activated]="tree.activatedNode?.id === node.id"
  [style.padding-left.rem]="paddingLeft"
  [style.height.rem]="node.height ? node.height : nodeHeight ? nodeHeight : ''"
  [style.align-items]="node.alignItems ? node.alignItems : nodeAlignItems"
  (click)="onActivate($event, node)"
>
  <x-icon
    *ngIf="!loading"
    [class.is-leaf]="!node.leaf"
    [class.is-open]="node.open"
    type="fto-chevron-right"
    (click)="!tree.nodeOpen && onToggle($event, node)"
  ></x-icon>
  <x-icon *ngIf="loading" type="fto-loader" [spin]="loading"></x-icon>
  <x-checkbox
    *ngIf="tree.checkbox"
    [data]="[{ label: '', id: node.id }]"
    [(ngModel)]="node.checked"
    (ngModelChange)="onCheckboxChange()"
    [indeterminate]="node.indeterminate"
    [disabled]="getNodeDisabled(node.disabled)"
    (click)="$event.stopPropagation()"
  ></x-checkbox>
  <span
    class="x-tree-node-label"
    [class.nowrap]="node.nowrap === false || node.nowrap === true ? node.nowrap : nodeNowrap"
    [title]="node.label"
    *ngIf="!tree.labelTpl; else labelTpl"
    >{{ node.label }}</span
  >
  <ng-template #labelTpl>
    <ng-container *xOutlet="tree.labelTpl; context: { $node: node }"></ng-container>
  </ng-template>
  <span class="x-tree-node-operations">
    <x-link
      *ngFor="let action of tree.actions; trackBy: trackByItem"
      [icon]="action.icon"
      [title]="action.label"
      (click)="onAction($event, action, node)"
    ></x-link>
  </span>
</div>
<ul *ngIf="node.childrenLoaded || (node.leaf && node.open)" [hidden]="!node.open">
  <li
    x-tree-node
    *ngFor="let child of node.children; trackBy: trackByItem"
    [node]="child"
    [parent]="this"
    [lazy]="lazy"
    [lazyData]="lazyData"
    [nodeHeight]="nodeHeight"
    [nodeNowrap]="nodeNowrap"
    [nodeAlignItems]="nodeAlignItems"
    [tree]="tree"
  ></li>
</ul>
